<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router3.js"></script>
    <style>
        #parent {
            width: 80%;
            height: 300px;
            border: 2px solid yellowgreen;
        }

        #nav {
            height: 50px;
            border: 1px solid red;
        }

        #nav > h3 {
            float: left;
        }

        #nav > p {
            float: right;
        }

        #items {
            margin-top: 5px;
            height: 200px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
<!--
          路由嵌套
-->

<div id="app">
    <router-view></router-view>
</div>


<script type="text/javascript">
    // 智能穿戴
    let SmartWearables = {
        template: `
            <div>
                <div id="parent">
                <div id="nav">
                 <h3>智能穿戴</h3>
                 <p>
                   <router-link to="/smart/earphone">耳机</router-link>
                   <router-link to="/smart/wear">穿戴</router-link>
                 </p>
                </div>

                <div id="items">
                   <router-view></router-view>
                </div>
                </div>
            </div>
        `
    }
    // 耳机
    let Earphone = {
        template: `
          <div>
          <p>耳机</p>
          </div>
        `
    }

    //  穿戴
    let Wear = {
        template: `
          <div>
          <p>穿戴</p>
          </div>
        `
    }


    //   路由嵌套
    const routes = [
        {path: '/', redirect: '/smart'},  //  重定向
        {
            path: '/smart',
            component: SmartWearables,
            children: [
                {path: 'earphone', component: Earphone},
                {path: 'wear', component: Wear}
            ]
        }
    ]

    let router = new VueRouter({
        routes
    })

    let vm = new Vue({
        el: '#app',
        router
    })
</script>
</body>
</html>